<template>
    <div>
        <vheader :ismini="iscollapse" :clientWidth="clientWidth"></vheader>
        <el-container style="border:0px solid #e3e3;"  id="content_module">
            <el-main style="padding:0px;">
                <el-carousel :interval="3000" indicator-position="none" id="el-carousel" :height="bannerHeight+'px'">
                    <el-carousel-item v-for="item in adimglist" :key="item">
                        <img :src="item.src" style="height:auto;width:100%; "/>
                    </el-carousel-item>
                </el-carousel>

                <el-row :gutter="30" style="width:95%; margin:0 auto; margin-top:20px; ">
                    <el-col :span="columnspan" v-for="df in loadDate.subjectList" :key="df.Id" style="margin-bottom:10px;"> 
                        <router-link :to='"/contentshow/"+df.Id+"/0"' style="text-decoration: none;">
                            <el-card :body-style="{ padding: '10px' }" shadow="hover">
                                <img :src="df.ListImg" class="image" style="width:100%;height:auto;" >
                                <div style="padding: 5px;">
                                    <div class="main-subject-item" style="text-decoration:none;">{{df.FullName}} - {{df.Resume}}</div>
                                </div>
                            </el-card>
                        </router-link>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
        <vfooter></vfooter>   
    </div>
</template>

<script>
    import vbanner from '../common/banner'; 
    import vfooter from "../common/Footer";
    import vheader from '../common/Header';
    import { page, page_rule } from "../../data/base_data";
    import { baseUrl, routerMode, baseImgPath } from "../../config/env";
    export default {
        data() {
            return {
                key: 1,
                columnspan:4,
                iscollapse:false,
                clientWidth:1300,
                clientHeight:0,
                bannerHeight: 700,
                screenWidth: 1920,
                screenHeight: 700,
                baseDate: {
                    curpage: {}
                },
                loadDate: { 
                    subjectList:[]
                },
                currentDate: new Date(),
                adimglist:[
                    { src:"../static/ad/1.jpg"},
                    { src:"../static/ad/2.jpg"},
                    { src:"../static/ad/9.jpg"},
                ]
            }
        },
        components:{
            vbanner,vheader,vfooter,
        },
        methods:{
            loadDraftSubject: function() {
                var rule = {};
                this.baseDate.curpage.FilterGroup.Rules = [rule];
                //post数据
                this.$http.post(baseUrl + "api/Admin/ContrastSubject/Read", this.baseDate.curpage).then(
                    function(res) {
                        this.loadDate.subjectList = res.body.Rows.select(function(r){
                            r.ListImg = '../static/noimg.png';
                            return r;
                        });
                    },
                    function(res) {
                        alert("操作数据获取失败");
                    }
                );
            },
            setSize: function() {
                this.bannerHeight = 700 / 1920 * this.screenWidth
                $(".el-carousel").height(this.bannerHeight);
                $(".el-carousel__container").height("100%");
                this.setPageScreenItem(this);
                $(".el-main").height(this.screenHeight -100 );
            },

            setPageScreenItem:function(self){
                self.clientHeight = this.bannerHeight - 100;
                self.clientWidth = this.screenWidth;

                //获取宽度
                self.iscollapse = self.clientWidth < 768;
                if (self.clientWidth < 475) {
                    self.columnspan = 12;
                } 
                else if (self.clientWidth < 768) {
                    self.columnspan = 8;
                }
                else {
                    self.columnspan = 4;
                }
            }
        },
        mounted:function () {
            let self = this;
            this.baseDate.curpage = page;
            window.onresize = function() {
                var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
                self.screenWidth = width;
                self.screenHeight = height;
                $("#content_module").height("100%");
                self.setSize();
            };
            window.onresize();

            this.loadDraftSubject();
        },
    }
</script>

<style scoped>
    .el-container, .page-container { width: 100%;padding: 0;margin: 0 auto;}
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        margin: 0;
    }
    
    img {
        display: inline-block;
        height: auto;
        max-width: 100%;
    }

    .el-carousel__container {
        position: relative;
        height: 100%;
    }
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .main-subject-item { 
        height:60px;font-size:12px; text-decoration: none;
    }
</style>